<template>
    <div class="box">
        <div id="main"></div>
    </div>
</template>

<script>
import echarts from 'echarts'

export default {
    props: {
        type: {
            type: String,
            default: 'plain'
        },
        eData: {
            type: Array,
            default: []
        }
    },
    data(){
        return {
            charts: '',
            opinionData: ["3", "2", "4", "4", "5"],
            legend: [
                '溶解氧',
                '上限值',
                '下限值'
            ]
        }
    },
    methods: {
        drawLine(id){
            let options = {
                    title: {
                        text: '万州水库'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        type: 'plain',
                        data: this.legend
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            // saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: [
                            '2020-12-03',
                            '2020-12-04',
                            '2020-12-05',
                            '2020-12-06',
                            '2020-12-07',
                            '2020-12-08',
                            '2020-12-09',
                            '2020-12-10',
                        ]
                    },
                    yAxis: {
                        type: 'value',
                    },
                    series: [
                        {
                            name: '溶解氧',
                            type: 'line',
                            stack: '总量',
                            data:['1','2','3','1','4','5','2']
                        },
                        {
                            name: '上限值',
                            type: 'bar',
                            stack: '总量',
                            data:['3','','3','1','7','5','2'],
                        },
                        {
                            name: '下限值',
                            type: 'bar',
                            data:['6','1','3','1','10','5','2']
                        },
                    ]
            }
            this.charts = echarts.init(document.getElementById(id))
            this.charts.setOption(options)
            
        }
    },
    watch:{
        eData: {
            deep: true,
            handle(val){
                this.drawLine('main')
            }
        }
    },
    mounted() {
        this.$nextTick(function() {
            this.drawLine('main')
        })
    },
}
</script>

<style scoped>
    #main{
        width: 1024px;
        height: 400px;
    }
</style>